<template>
<div class="app-container">
  <div class="flexarea">
    <!--左边题目编号区-->
    <div class="left">
      <div class="l-bottom">
        <div class="item">
          <p>选择题</p>
          <ul>
          <li v-for="(item,index) in multiQuestionList" :key="index" >
            <button @click="selectQuestion('2', item)">
             {{ getStartIndex('multi') + index + 1 }}
            </button>
          </li>
          </ul>
        </div>
        <div class="item">
          <p>判断题</p>
          <ul >
            <li v-for="(item,index) in judgeQuestionList" :key="index" >
              <button @click="selectQuestion('1',item)">
                {{ getStartIndex('judge') + index + 1 }}
              </button>
            </li>
          </ul>
        </div>
        <div class="item">
          <p>填空题</p>
          <ul >
            <li v-for="(item,index) in fillQuestionList" :key="index">
              <button @click="selectQuestion('3',item)">
                    {{ getStartIndex('fill') + index + 1 }}
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!--右边选择答题区-->
    <div class="right">
      <div class="content">
        <div class="is-empty" v-if="total===0">试卷里面空空如也，快去添加试题吧</div>
        <p class="topic">{{ currQuestion.questionText }}</p>
        <div>
          <div class="el-radio-group" v-if="currQuestion.questionType === '2' ">
            <label class="el-radio" >A. {{ currQuestion.aOption||'暂无选项' }}</label>
            <label class="el-radio" >B. {{ currQuestion.bOption||'暂无选项' }}</label>
            <label class="el-radio" >C. {{ currQuestion.cOption||'暂无选项' }}</label>
            <label class="el-radio" >D. {{ currQuestion.dOption||'暂无选项' }}</label>
          </div>
          <div class="judge-answer" v-if="currQuestion.questionType === '1'">
            <button>T</button> <button>F</button>
           </div>
          <div class="fill-answer" v-if="currQuestion.questionType === '3'">
          </div>
        </div>
      </div>
      <div class="right-answer">
       <button @click="()=>{openAnswer=!openAnswer}">{{openAnswer?'隐藏正确答案':'显示正确答案'}}</button>
       <div  v-if="openAnswer">
        <span>正确答案 ：{{currQuestion.answer}}</span>
       </div>
      </div>
      <div class="operation">
        <ul class="end">
          <li @click="getPrevQuestion"><i class="iconfont icon-previous">⏮️</i>上一题</li>
          <li @click="()=>{console.log(judgeQuestionList)}"><i class="iconfont icon-previous">📌</i>标记</li>
          <li @click="getNextQuestion">下一题<i class="iconfont icon-next">⏭️</i></li>
        </ul>
      </div>
    </div>
  </div>
  </div>
</template>

<script setup>
import {getPaperQuestionList,getExam} from '@/api/module/exam'
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'

const openAnswer=ref(true)

const exam = ref({
  paperDetail:[3,2,1]
})
//试题数量
const total=ref(0)
//试题列表
const questionList=ref([])
const route = useRoute()

//页面显示的题目
const currQuestion=ref({
})


const judgeQuestionList=computed(()=>{
  //这里取questionList的前exam.value.paperDetail[0]条数据
    // 为空保护
    if (!questionList.value || questionList.value.length === 0) return [];
    if (!exam.value.paperDetail || exam.value.paperDetail.length < 1) return [];
    return questionList?.value.slice(0, exam.value.paperDetail[0]);
})
const multiQuestionList=computed(()=>{
    // 为空保护
    if (!questionList.value || questionList.value.length === 0) return [];
    if (!exam.value.paperDetail || exam.value.paperDetail.length < 1) return [];
  const start = exam.value.paperDetail[0];
  const end = start + exam.value.paperDetail[1];
  return questionList?.value.slice(start, end);
})
const fillQuestionList=computed(()=>{ 
  // 为空保护
    if (!questionList.value || questionList.value.length === 0) return [];
    if (!exam.value.paperDetail || exam.value.paperDetail.length < 1) return [];
  const start = exam.value.paperDetail[0] + exam.value.paperDetail[1];
  return questionList?.value.slice(start);
})

// 页面题目列表（按顺序）
const allQuestions = computed(() => {
  return [
    ...multiQuestionList.value,
    ...judgeQuestionList.value,
    ...fillQuestionList.value
  ]
})

// 当前题目索引
const currentIndex = ref(0)


// 返回当前题型的起始序号
function getStartIndex(type) {
  if (type === 'multi') return 0
  if (type === 'judge') return exam.value.paperDetail[1] || 0
  if (type === 'fill') return (exam.value.paperDetail[0] || 0) + (exam.value.paperDetail[1] || 0)
  return 0
}

//获取所有试题
const getQuestionList=async()=>{ 
 return getPaperQuestionList({examCode:route.params.examCode}).then(res=>{ 
    // questionList是一个数组，需要给每个试题对象的question前添加一个序号
    questionList.value = res.rows
    total.value=res.total
  })
}

function getExamInfo(){
 return getExam(route.params.examCode).then(res=>{ 
  exam.value = res.data
})
}

//选中题目
const selectQuestion=(value,question)=>{
  //计算被点击的题目在总题目的索引值
  currentIndex.value = allQuestions.value.findIndex(q => q.questionId === question.questionId&&q.questionType===question.questionType)

  //清空
 currQuestion.value= {
  questionText:'',
  aOption:'',
  bOption:'',
  cOption:'',
  dOption:'',
  answer:'',
  score:0,
  questionType:''
}
    currQuestion.value.questionText=question.question
    currQuestion.value.answer=question.answer
    currQuestion.value.score=question.score
  if(value==="2"){
    // 选择题
    currQuestion.value.aOption=question.aOption
    currQuestion.value.bOption=question.bOption
    currQuestion.value.cOption=question.cOption
    currQuestion.value.dOption=question.dOption
    currQuestion.value.questionType=question.questionType||"2"
  }else if(value==="1"){
    // 判断题
    currQuestion.value.questionType=question.questionType||"1"
  }else if(value==="3"){
    // 填空题
    currQuestion.value.questionType=question.questionType||"3"
  }

}

// 上一题
function getPrevQuestion() {
  if (currentIndex.value > 0) {
    currentIndex.value--
    const prevQuestion = allQuestions.value[currentIndex.value]
    selectQuestion(prevQuestion.questionType,prevQuestion)
  }
}

// 下一题
function getNextQuestion() {
  if (currentIndex.value < allQuestions.value.length - 1) {
    currentIndex.value++
    const prevQuestion = allQuestions.value[currentIndex.value]
    selectQuestion(prevQuestion.questionType,prevQuestion)
    
  }
}

onMounted(async ()=>{ 
    // 使用Promise.all确保两个请求都完成
     Promise.all([getExamInfo(), getQuestionList()]).then(() => {
       if (allQuestions.value.length > 0) {
         const firstQuestion = allQuestions.value[0];
         selectQuestion(firstQuestion.questionType, firstQuestion);
       }
     });

})

</script>

<style lang="less">
.mark {
  position: absolute;
  width: 4px;
  height: 4px;
  content: "";
  background-color: red;
  border-radius: 50%;
  top: 0px;
  left: 22px;
}

.border {
  position: relative;
  border: 1px solid #FF90AA !important;
}

.bg {
  background-color: #5188b8 !important;
}

.operation .end li:nth-child(2) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(39, 118, 223);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #fff;
}



.operation {
  border-radius: 4px;
  padding: 10px 0px;
  margin-right: 10px;
}
//控制区
.operation .end {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(39, 118, 223);
  // background-color: blue;
}
//控制区按钮
.operation .end li  {
  // background-color: red;
  width: 80px;
  height: 50px;
  cursor: pointer;
  margin: 0 100px;
  list-style: none; 
}

.content .number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: rgb(39, 118, 223);
  border-radius: 4px;
  margin-right: 4px;
}

.content {
  padding: 0px 20px;
}
//题目区域
.content .topic {
  padding: 20px 50px;
  padding-top: 30px;
}

 .right .content{
  margin: 10px;
  margin-left: 0px;
  height: 470px;
  // background-color: red;
}
.right .content .is-empty{
  width:100%;
  height: 100%;
  padding-left: 100px;
  padding-top: 200px;
  font-size: 25px;
  // background-color: blue;
}

//每条答案
.content .el-radio-group label {
  margin: 20px 0px;
  margin-left: 40px;
  width: 90%;
  // background-color: blue;
  
}
//答案区
.content .el-radio-group {
  // background-color: red;
  width: 50%;
  display: flex;
  flex-direction: column;
  
}

.flexarea {
  display: flex;
}

.flexarea .right {
  flex: 1;
}

//左边区域
.left {
  width: 260px;
  height: 100%;
  margin: 10px 10px 0px 10px;
  border-right: 2px solid gray; /* 设置左边灰色边框 */

}

.l-bottom .item p {
  color: #ffffff;
  margin-bottom: 0px;
  letter-spacing: 2px;
}



.l-bottom .item {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.l-bottom .item ul {
  width: 100%;
  display: flex;
  justify-content: flex-start; // 从左开始排列
  flex-wrap: wrap;             // 允许换行
  list-style: none;      // 👈 添加这行
  padding-left: 0;        // 👈 可选，去除默认内边距
}

.l-bottom .item li {

  width: 50px ; 
  height: 50px;
   
}

.l-bottom .item li button {
  //按钮长宽
  width:50%;
  height: 50%;
  //居中
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%; /* 使按钮变圆 */
}

.judge-answer {
  display: flex;
  // background-color: red;
  margin-top: 30px;
  margin-left: 50px;
}

.judge-answer button{
  width: 25px;
  height: 25px;
  // margin: 10px,100px;
  margin-right: 80px;
  background-color: transparent;
  border: none; /* 移除边框 */
  border-radius: 50%; /* 使按钮变圆形 */
}

//正确答案区域
.right-answer{
  width:100%;
  height: 50px;
  // background-color: red;
  margin-bottom: 25px;
  margin-left:70px;
}

.right-answer button{
  margin-top: -20px;
  margin-bottom: 20px;
  border: none; /* 移除边框 */
  
}




</style>